<template>
	<view class="pageV">
		<u-navbar title="冠军报表" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#111111"
			:titleStyle="titleStyle">

		</u-navbar>
		<view class="qiehuan" @click="show = true">
			<image src="/shop/static/qiehuan.png" class="qiehuanicon"></image>
			<text>{{year}}年</text>
			<image src="/shop/static/qiehuan.png" class="qiehuanicon" style="transform: rotate(180deg);"></image>
		</view>
		<view class="tabview">
			<!-- <table class="table" width="94%">
				<tr class="tr header_tab">
					<td class="th">月份</td>
					<td class="th">月冠军</td>
					<td class="th">季冠军</td>
					<td class="th">年冠军</td>
				</tr>
				<tr class="tr header_tabtwo" v-for="(item,index) in nlist" :key="index">
					<td class="th">{{ item.yue }}</td>
					<td class="th"><text>{{ item.yueguan }}</text></td>
					<td class="th" rowspan="3" v-if="index==0||index==3||index==6||index==9">{{ item.jiguan }}</td>
					<td class="th" rowspan="12" v-if="index==0">{{item.nianguan}}</td>
				</tr>
			</table> -->
			<!-- <view class="table" style="width:90%">
				<view class="tr header_tab">
					<view class="th">月份</view>
					<view class="th">月冠军</view>
					<view class="th">季冠军</view>
					<view class="th">年冠军</view>
				</view>
				<view class="tr header_tabtwo"  v-for="(item,index) in list" :key="index">
					<view class="td tdclass" rowspan="1">{{ item.yue }}</view>
					<view class="td tdclass" rowspan="1">{{ item.yueguan }}</view>
					<view class="td oneclass" rowspan="3" v-if="index==0||index==3||index==6||index==9">{{ item.jiguan }}</view>
					<view class="zi td twoclass" rowspan="12" v-if="index==0">{{item.nianguan}}</view>
				</view>
			</view> -->
			<view class="gcont">
				<view class="gone">
					<view class="gotit">
						月份
					</view>
					<view class="gotit">
						月冠军
					</view>
					<view class="gotit">
						季冠军
					</view>
					<view class="gotit">
						年冠军
					</view>
				</view>
				<view class="twoview" v-if="list">
					<view class="gtwo">
						<view class="gtwoitem" v-for="(item,index) in list" :key="index">
							<text class="gtviewtext">{{ item.yue }}</text>
						</view>
					</view>
					<view class="gtwo">
						<view class="gtwoitem" v-for="(item,index) in list" :key="index">
							<text class="gtviewtext">{{ item.yueguan }}</text>
						</view>
					</view>
					<view class="gtwo">
						<view class="gtwoitem " v-for="(item,index) in list" v-if="index==0||index==3||index==6||index==9" :key="index">
							<text class="gtviewtext">{{ item.jiguan }}</text>
						</view>
					</view>
					<view class="gtwo">
						<view class="gtwoitem" v-for="(item,index) in list" v-if="index==0" :key="index">
							<text class="gtviewtext">{{ item.nianguan }}</text>
						</view>
					</view>
				</view>
			</view>



			<!-- <view class="tablenew">
				<view class="tr ">
					<text class="th ft16">股金</text>
					<text class="th ft16">份额</text>
					<text class="th ft16">分成</text>
					<text class="th ft16">收益</text>
				</view>

				<view class="tr bottom_dashed" v-for="(it,index) in 1" :key="index" style='border-bottom: none'>
					<view class="td ft14">￥5000</view>
					<view class="td ft14">500份</view>
					<view class="td ft14">50%</view>
					<view class="td ft14 cl-red">￥50000</view>
				</view>
			</view> -->
			
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @close="show=false" @cancel="show=false"></u-picker>
		<!-- <view  v-if="mRoleList.length==0" class="noV">
			<image src="https://s1.ax1x.com/2023/04/19/p9FHmWR.png" mode="aspectFill"></image>
			<view>咦~，一片空白，还没有数据呢</view>
		</view> -->
		<!-- <u-calendar color="#d4ff45" :show="rilishow" @confirm="confirm" @close="rilishow=false"  :minDate="minDate" :defaultDate="maxDate"></u-calendar> -->
		<!-- <u-calendar v-model="rilishow" :mode="mode"></u-calendar> -->
	</view>
</template>

<script>
		const d = new Date()
		const year = d.getFullYear()
		let month = d.getMonth() + 1
		month = month < 10 ? `0${month}` : month
		const date = d.getDate()
	export default {
		
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				mRoleList: [],
				pos: -1,
				type:0,//是否是第一次进来  0第一次  1第二次
				nlist:[
					{yue:1,yueguan:'张大伟',jiguan:'张三',nianguan:'李四'},
					{yue:2,yueguan:'张大伟'},
					{yue:3,yueguan:'张大伟'},

					{yue:4,yueguan:'张大伟',jiguan:'张三'},
					{yue:5,yueguan:'张大伟'},
					{yue:6,yueguan:'张大伟'},

					{yue:7,yueguan:'张大伟',jiguan:'张三'},
					{yue:8,yueguan:'张大伟'},
					{yue:9,yueguan:'张大伟'},

					{yue:10,yueguan:'张大伟',jiguan:'张三'},
					{yue:11,yueguan:'张大伟'},
					{yue:12,yueguan:'张大伟'},
				],
				rilishow: false,
				mode: 'date',
				year:`${year}`,
				maxDate: `${year}-${month}-${date}`,
				minDate:'2022-01-01',
				mRoleId:-1,
				year_arr:[],
				list:[],
				show: false,
                columns: [
                    []
                ]
			}
		},
		onLoad(e) {
			console.log(`${year}-${month}-${date}`)
			this.mRoleId = e.mRoleId;
			this.getGuanJun()
		},
		methods: {
			getGuanJun() {
				this.$api.getGuanJun({
					role_id:this.mRoleId,
					year:this.year
				}).then((res) => {
					console.log(res)
					this.year_arr = res.year_arr
					let shuju = []
					shuju[0] = res.year_arr
					this.columns = shuju
					this.list = res.data
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			confirm(e){
				console.log(e)
			},
			yearClick(e){
				if(e == 1){
					//减去
					this.year -- 
				}else if(e== 2){
					//加上
					this.year ++
				}
			},
			confirm(e){
				// console.log(e)
				// console.log(e.value[0])
				this.year = e.value[0]
				this.show = false
				this.getGuanJun()
			}
		}
	}
</script>

<style lang="scss">
	.pageV {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	.noV {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		image {
			width: 360rpx;
			height: 194rpx;
		}
	
		view {
			font-size: 28rpx;
			color: #999999;
			margin-top: 47rpx;
		}
	}
	.table {
  	// width: 100%;
  	border-radius: 10rpx;
  	display: table;
  	// border: 0.5px solid rgba(115, 115, 115, 1);
  	border-collapse: collapse;
  	margin-bottom: 0rpx;
  }
  .tabview{
	padding: 30rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .header_tab{
	background: rgba(51, 51, 51, 1);
	height: 60rpx;

  }
  
  .th {
  	text-align: center;
  	padding: 10rpx 3px;
  	font-weight: bolder;
  	display: table-cell;
  	// background: #FFFFFF;
  	font-size: 32rpx;
	font-weight: 400;
	color: rgba(232, 232, 232, 1);
  	// border: 0.5px solid rgba(115, 115, 115, 1);
		// width: 25%;
	width: 100rpx;	
  }
  
  .td {
  	text-align: center;
  	// background: #FFFFFF;
  	// padding: 20rpx 5rpx;
  	display: table-cell;
  	// border: 1rpx solid #737373;
  	font-size: 32rpx;
	font-weight: 400;
	width: 100rpx;	
	color: rgba(232, 232, 232, 1);
	text-align: center;
    vertical-align: middle;
	height: 80rpx;
  }
//   .header_tab .th:first-child{
// 	border-left: 0px solid #737373 !important;
//   }
//   .header_tab .th{
// 	border-top: 0px solid #737373 !important;
//   }
//   .header_tab .th:last-child{
// 	border-right: 0px solid #737373 !important;
//   }
//   .header_tabtwo .th:first-child{
// 	border-left: 0px solid #737373 !important;
//   }
//   .header_tabtwo .th{
// 	border-top: 0px solid #737373 !important;
//   }
//   .header_tabtwo .th:last-child{
// 	border-right: 0px solid #737373 !important;
//   }
  
  .tdinput {
  	width: 120rpx;
  }
  .tabview{
    width: 100%;
  }
  .one_header_tab{
    width: 100%;
    background-color: rgba(218, 244, 244, 1);
    border-radius:0rpx 0rpx 0 0;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(51, 51, 51, 1);
    font-size: 26rpx;
    font-weight: 500;
  }
  .oneth{
    width: 50%;
  }
  .twoth{
    width: 25%;
  }
  .qiehuan{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30rpx;
	image{
		width: 20rpx;
		height: 20rpx;
	}
	text{
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(232, 232, 232, 1);
		display: inline-block;
		margin: 0 10rpx;

	}
  }

//   .tablenew {
// 		width: 100%;
// 		border-radius: 8rpx;
// 		display: table;
// 		border: 1px solid #f7f7f7;
// 		border-collapse: collapse;
// 		.th {
// 			text-align: center;
// 			color: #FFFFFF;
// 			padding: 20rpx 0;
// 			font-weight: bolder;
// 			display: table-cell;
// 			border: 1px solid #f7f7f7
// 		}
	
// 		.td {
// 			text-align: center;
// 			background: #FFFFFF;
// 			padding: 20rpx 0;
// 			display: table-cell;
// 			border: 1px solid #f7f7f7
// 		}
	
		
// 	}
	.tr {
		display: table-row;
	}
	.oneclass{
		position: absolute;
		width: 167rpx;
		height: 247rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		// border-bottom: 0.5px solid #737373;
	}
	.tdclass{
		// border: 0.5px solid #737373;
		width: 100rpx;
		height: 80rpx;
		// position: absolute;
	}
 
	.twoclass{
		width: 167rpx;
		position: absolute;
		right: 38rpx;
		border: none;
		height: 983rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// border-bottom: 0.5px solid #737373;
	}
	.header_tabtwo{
		border-bottom: 0.5px solid #737373;
		border-right: 0.5px solid #737373;
	}
	

  .floatingBox{
	position:relative; /*设置元素脱离文档流*/
	animation: floatUpDown 2.5s ease-in-out infinite; /*设置动画，循环播放*/
	}

	.gcont{
		margin: 30rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.gone{
		height: 60rpx;
		background: rgba(51, 51, 51, 1);
		display: flex;
		flex-direction: row;
		width: 100%;
		.gotit{
			flex: 1;
			// border-right: 1rpx solid rgba(115, 115, 115, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(232, 232, 232, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.gotit:last-child{
			border-right: none;
		}
		
	}
	.twoview{
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.gtwo{
	   display: flex;
	   flex-direction: column;
	//    flex: 1;
		width: 25%;
	   position: relative;
	   	.gtwoitem{
			display: flex;
			flex-direction: column;
			width: 100%;
			flex: 1;
			padding: 10rpx 0;
			border-right: 1rpx solid rgba(115, 115, 115, 1);
			border-bottom: 1rpx solid rgba(115, 115, 115, 1);
			.gtviewtext{
				// height: 70rpx;
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(232, 232, 232, 1);
				
			}
			
		}
	}
	.gtwo:last-child{
		.gtwoitem{
			border-right: 1rpx solid #111111;
			// .gtviewtext{
				
			// 	// border-bottom: 1rpx solid rgba(115, 115, 115, 1);
			// }
			
		}
	}
	.gtwo:nth-child(3){
		
		.gtwoitem{
			padding: 0;
		}
		// .gtwoitem:nth-child(2){
		// 	border-bottom: 1rpx solid #111111;
			
		// }
		// .gtwoitem:nth-child(1){
		// 	border-bottom: 1rpx solid #111111;
			
		// }
	}
	
</style>